<template>
	<div>
		<el-row :gutter="12" class="use-number">
			<el-col :sm="12" :lg="6">
				<el-card shadow="always">
					<div slot="header" class="clearfix">
						<span>访问量</span>
						<i class="el-icon-info"></i>
					</div>
					<div class="card-body">
						<count-to
							:startVal="0"
							:endVal="endVal"
							:duration="1500"
						></count-to
						><span>人</span>
					</div>
					<div class="card-footer">
						<span>总访问量</span>
						<span>300 w</span>
					</div>
				</el-card>
			</el-col>
			<el-col :sm="12" :lg="6">
				<el-card shadow="always">
					<div slot="header" class="clearfix">
						<span>注册量</span>
						<i class="el-icon-info"></i>
					</div>
					<div class="card-body">
						<count-to
							:startVal="0"
							:endVal="endVal"
							:duration="1500"
						></count-to
						><span>人</span>
					</div>
					<div class="card-footer">
						<span>总注册量</span>
						<span>500 w</span>
					</div>
				</el-card>
			</el-col>
			<el-col :sm="12" :lg="6">
				<el-card shadow="always">
					<div slot="header" class="clearfix">
						<span>销售额</span>
						<i class="el-icon-info"></i>
					</div>
					<div class="card-body">
						<count-to
							:startVal="0"
							:endVal="endVal"
							:duration="1500"
						></count-to
						><span>人</span>
					</div>
					<div class="card-footer">
						<span>总销售额</span>
						<span>1700 w</span>
					</div>
				</el-card>
			</el-col>
			<el-col :sm="12" :lg="6">
				<el-card shadow="always">
					<div slot="header" class="clearfix">
						<span>活动效果</span>
						<i class="el-icon-info"></i>
					</div>
					<div class="card-body">
						<count-to
							:startVal="0"
							:endVal="endVal"
							:duration="1500"
						></count-to
						><span>人</span>
					</div>
					<div class="card-footer">
						<span>周同比 ↑ 56.67% 日同比 ↑ 19.96%</span>
						<span>百分比 %</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 卡片 -->
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="always">
					<div class="header" slot="header">
						<el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
							<el-tab-pane
								label="销售额"
								name="sale"
							></el-tab-pane>
							<el-tab-pane
								label="访问量"
								name="visite"
							></el-tab-pane>
						</el-tabs>
						<div class="header-right">
							<!-- <span @click="setDay">当前日期</span> -->
							<el-date-picker
								v-model="date"
								class="date"
								type="daterange"
								range-separator="-"
								:editable="false"
								@change="changedate(date)"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
							>
							</el-date-picker>
						</div>
					</div>
					<div class="charts-box">
						<el-row :gutter="10">
							<el-col :lg="16" :sm="16">
								<h3>{{ title }}</h3>
								<div
									class="charts"
									ref="charts"
									style="width: 700px; height: 400px"
								></div>
							</el-col>
							<el-col :lg="8" :sm="8" class="right">
								<h3>{{ title }}来源统计</h3>
								<div class="charts-from" ref="chartsfrom" style="width: 300px; height: 400px"></div>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 卡片 -->
    <el-row :gutter="12">

      <el-col :span="12">
        <el-card shadow="always">
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always">
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
          <p>AAAAAAAAAAAAAAA</p>
        </el-card>
      </el-col>

    </el-row>
	</div>
</template>
<script>
import axios from 'axios'
// 引入echarts(按需引入echarts)
import * as echarts from 'echarts'
// 引入vue-count-to计数板
import countTo from 'vue-count-to'
export default {
	components: {
		countTo,
	},
	computed: {
		// 计算属性,产生随机数
		endVal: () => {
			return Math.floor(Math.random() * 8999 + 1000)
		},
		title() {
			return this.activeName == 'sale' ? '销售额' : '访问量'
		},
	},
	watch: {},
	data() {
		return {
			activeName: 'sale',
			// 日历数据
			date: [],
			mockNumber: [],
      mycharts:'',
      mychart:''
    }
	},

	created() {
    this.getMock();
    /*this.$nextTick(()=>{
      console.log('nextTick')
    })*/
	},
	mounted() {
		// 调用echarts函数加载饼图
		this.formEcharts();
	},


	methods: {
		changedate(date) {
			console.log(`当前日期${date}`)
      // 重新调用前需要销毁上一次的echarts
      echarts.dispose(this.mycharts) // 销毁echarts
      this.getMock();
		},
    handleClick(tab,event) {
		  console.log(tab.label)
      // 不同类目请求不同数据渲染echarts
      if (tab.label=='销售额') {
        this.getMock();
      } else {
        this.getMock();
      }
    },
		getMock() {
			axios.get('/data/Random/Number').then((res) => {
			  console.log(res.data)
        	  for (let obj of res.data) {
            	// console.log(obj.value)
            	this.mockNumber.push(obj.value)
          	}
        		// 重新调用前需要销毁上一次的echarts(先判断当前echarts是否存在且不为空)
        		echarts.dispose(this.mycharts)
        		this.useEcharts();
			})
		},
	    	useEcharts() {
	// 初始化echarts
     this.mycharts = echarts.init(this.$refs.charts)
			var option = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
					    data: this.mockNumber,
						// data: [100,150,599,903,300,500,478],
						type: 'line',
						smooth: true,
					},
				],
			}
			this.mycharts.setOption(option)
		},
		formEcharts() {
     	  this.mychart = echarts.init(this.$refs.chartsfrom);
			const option = {
								tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [
					{
					name: '来源统计',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{ value: 1048, name: '门店' },
						{ value: 735, name: '短视屏' },
						{ value: 580, name: '地推' },
						{ value: 484, name: '平台' },
						{ value: 300, name: 'app' }
					]
					}
				]
			}
     	 this.mychart.setOption(option)
		}
	},
}
</script>

<style scoped lang='scss'>
.el-card {
	margin-top: 20px;
	.clearfix {
		display: flex;
		justify-content: space-between;
		color: #d9d9d9;
	}
	.card-body {
		font-size: 20px;
	}
	.card-footer {
		border-top: 1px solid #f6f6f6;
		margin-top: 20px;
		padding-top: 15px;
		color: grey;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}
}
.header {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	.tab {
		width: 100%;
	}
}
.header-right {
	position: relative;
	bottom: 14px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	span {
		display: inline-block;
	}
}
h3 {
	font-size: 20px;
	font-weight: 800;
}
.use-number {
	margin-bottom: 30px;
}
</style>
